<template>
    <my-dialog 
    v-model="model" 
    title="发票信息" 
    width="660px"
    >
        <my-form 
        v-model="form"
        :submit-url="`${$store.state.api.webUrl}/orderinvoice/add.json`"
        @submit="submitHandler"
        @cancle="cancleHandler"
        >
            <el-row>
                <el-col :span="12">
                    <el-form-item 
                    label="发票类型" 
                    prop="type" 
                    :rules="newRule('发票类型', 'required')"
                    >
                        <my-radio
                            v-model="form.type"
                            :data="[{key:'1', value:'增值税电子普通发票'},]"
                        ></my-radio>
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item 
                    label="发票内容" 
                    prop="content" 
                    :rules="newRule('发票内容', 'required')"
                    >
                        <my-radio
                            v-model="form.content"
                            :data="[{key:'技术服务费', value:'技术服务费'},]"
                        ></my-radio>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-form-item 
            label="抬头类型" 
            prop="risetype" 
            :rules="newRule('抬头类型', 'required')"
            >
                <my-radio
                    v-model="form.risetype"
                    :data="[{key:'1', value:'企业'},{key:'2', value:'个人（抬头类型为个人，则只能开具姓名的发票）'},]"
                ></my-radio>
            </el-form-item>

            <div v-if="form.risetype === '2'" key="persional">
                <el-row>
                    <el-col :span="12">
                        <el-form-item 
                        label="姓名" 
                        prop="addname" 
                        :rules="newRule('姓名', 'required')"
                        >
                            <el-input v-model="form.addname"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item 
                        label="身份证号" 
                        prop="addidnumber" 
                        :rules="newRule('身份证号', 'required')"
                        >
                            <el-input v-model="form.addidnumber"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item 
                        label="电子邮箱" 
                        prop="addmailbox" 
                        :rules="newRule('电子邮箱', 'required', 'email')"
                        >
                            <el-input v-model="form.addmailbox"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>

            <div v-if="form.risetype === '1'" key="company">
                <el-row>
                    <el-col :span="12">
                        <el-form-item 
                        label="企业名称" 
                        prop="addname" 
                        :rules="newRule('企业名称', 'required')"
                        >
                            <el-input v-model="form.addname"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item 
                        label="纳税人识别码" 
                        prop="taxpayernum" 
                        :rules="newRule('纳税人识别码', 'required')"
                        >
                            <el-input v-model="form.taxpayernum"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item 
                        label="发票地址" 
                        prop="invoiceaddress" 
                        :rules="newRule('发票地址', 'required')"
                        >
                            <el-input v-model="form.invoiceaddress"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item 
                        label="电话" 
                        prop="invoicemobile" 
                        :rules="newRule('电话', 'required')"
                        >
                            <el-input v-model="form.invoicemobile"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item 
                        label="开户行" 
                        prop="bankofdeposit" 
                        :rules="newRule('开户行', 'required')"
                        >
                            <el-input v-model="form.bankofdeposit"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item 
                        label="银行账号" 
                        prop="bankcardnumber" 
                        :rules="newRule('银行账号', 'required')"
                        >
                            <el-input v-model="form.bankcardnumber"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <div class="tip">
                    <i class="el-icon-warning"></i>
                    服务完成后五个工作日开具发票
                </div>
            </div>
        </my-form>
    </my-dialog>
</template>

<script>
import MODEL_MIXIN from '@mixins/model';

export default {
    mixins: [MODEL_MIXIN],
    props: {
        value: {
            type: Boolean,
            default: false,
        },
        data: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            form: {
                type: '',
                risetype: '',
                content: '',

                addname: '',
                addidnumber: '',
                addmailbox: '',

                invoiceaddress: '',
                taxpayernum: '',
                invoicemobile: '',
                bankofdeposit: '',
                bankcardnumber: '',
            },
        };
    },
    computed: {
        detailExtra() {
            return {
                guid: this.data.fictitiousguid,
            };
        },
    },
    watch: {
        value(val) {
            if (val) {
                this.detailHandler();
            }
        },
    },
    methods: {
        cancleHandler() {
            this.$emit('close');
        },
        detailHandler() {
            this.$get(`${this.$store.state.api.webUrl}/orderinvoice/detail.json`, this.detailExtra, data => {
                var form = data || {};

                form.ordercode = form.ordercode || this.data.fictitiousguid;
                form.risetype = form.risetype || '1';
                form.type = form.type || '1';
                form.content = form.content || '技术服务费';

                this.form = form;
            });
        },
        submitHandler() {
            this.$emit('submit');
        }
    },
};
</script>

<style lang="scss" scoped>
    @import '@css/var.scss';  

    .tip{
        color: $warningColor;
        font-size: 14px;
        text-align: center;
    }
</style>